(function () {
  function getTime () {
    let time = new Date()
    let year = time.getFullYear()
    let month = time.getMonth() + 1
    let day = time.getDate()
    let hours = time.getHours() < 10 ? time.getHours() + 1 : time.getHours()
    let minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
    let s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
    return `${year} 年 ${month} 月 ${day}日 -${hours} 时 ${minutes} 分 ${s} 秒 `
  }
  setInterval(() => {
    document.querySelector('header .current_time').innerHTML = getTime()
  }, 1000)

  let myChart = echarts.init(document.querySelector(".bar .chart"))

  let option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
      lineStyle: { color: "rgba(255,255,255,.1)", width: 1, type: "solid" }
    },
    yAxis: {
      type: 'value',
      // y 轴文字标签样式
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
      // y轴线条样式
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      },
      // y 轴分隔线样式
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    },
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: [200, 300, 300, 900, 1500, 1200, 600],
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  }

  option && myChart.setOption(option)


  window.addEventListener("resize", function () {
    myChart.resize()
  })

  var yearData = [
    {
      year: "2020", // 年份
      data: [
        // 两个数组是因为有两条线
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
      ]
    },
    {
      year: "2021", // 年份
      data: [
        // 两个数组是因为有两条线
        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
      ]
    }
  ]
  var myChart2 = echarts.init(document.querySelector(".line .chart"))
  var option2 = {
    // 通过这个color修改两条线的颜色
    color: ["#00f2f1", "#ed3f35"],
    tooltip: {
      trigger: "axis"
    },
    legend: {
      // 如果series 对象有name 值，则 legend可以不用写data
      // 修改图例组件 文字颜色
      textStyle: {
        color: "#4c9bfd"
      },
      // 这个10% 必须加引号
      right: "10%"
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },

    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
      axisLine: {
        show: false // 去除轴线
      }
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false // 去除刻度线
      },
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: "12"
      },
      axisLine: {
        show: false // 去除轴线
      },
      splitLine: {
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      }
    },
    series: [
      {
        name: "新增粉丝",
        type: "line",
        // true 可以让我们的折线显示带有弧度
        smooth: true,
        data: yearData[0].data[0]
      },
      {
        name: "新增游客",
        type: "line",
        smooth: true,
        data: yearData[0].data[1]
      }
    ]
  }

  // 3. 把配置给实例对象
  myChart2.setOption(option2)
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart2.resize()
  })

  let chartDom3 = document.querySelector('.pie .chart')
  let myChart3 = echarts.init(chartDom3)
  let option3 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '0%',
      // 小图标的宽度和高度
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        // 设置饼形图在容器中的位置
        center: ['50%', '50%'],
        //  修改内圆半径和外圆半径为  百分比是相对于容器宽度来说的
        radius: ['40%', '60%'],
        // 不显示标签文字
        label: { show: false },
        // 不显示连接线
        labelLine: { show: false },
        color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab'],
        data: [
          { value: 1, name: '0岁以下' },
          { value: 4, name: '20-29岁' },
          { value: 2, name: '30-39岁' },
          { value: 2, name: '40-49岁' },
          { value: 1, name: '50岁以上' }
        ]
      }
    ]
  }
  option3 && myChart3.setOption(option3)
  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart3.resize()
  })

  // 6. 南丁格尔玫瑰图
  console.log(document.querySelector('.piee chart'))
  let chartDom6 = document.querySelector('.piee .chart')
  let myChart6 = echarts.init(chartDom6)

  let option6 = {
    series: [
      {
        color: [
          '#006cff',
          '#60cda0',
          '#ed8884',
          '#ff9f7f',
          '#0096ff',
          '#9fe6b8',
          '#32c5e9',
          '#1d9dff'
        ],
        name: '面积模式',
        type: 'pie',
        radius: [10, 90],
        center: ['50%', '50%'],
        roseType: 'radius',
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10
        },
        roseType: 'area',
        itemStyle: {
          borderRadius: 4
        },
        labelLine: {
          length: 4,
          length2: 6
        },
        data: [
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }
        ]
      }
    ]
  }

  option6 && myChart6.setOption(option6)


  // 4. 让图表跟随屏幕自动的去适应
  window.addEventListener("resize", function () {
    myChart6.resize()
  })
})();


(function () {

  let chartDom6 = document.querySelector('.map .chart')
  let myChart = echarts.init(chartDom6)

  var uploadedDataURL = "https://madeapie.com/asset/get/s/data-1528971808162-BkOXf61WX.json"
  var points = [
    { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }
    , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }
    , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }
    , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }
    , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }
    , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }
    , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }
    , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }
    , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }
    , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }
    , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }
    , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }
    , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }
    , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }
    , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }
    , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }
    , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }
    , { value: [119.4543, 25.9222] }
  ]
  // var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
  myChart.showLoading()
  let index = -1

  $.getJSON(uploadedDataURL, function (geoJson) {

    echarts.registerMap('china', geoJson)
    myChart.hideLoading()
    option = {
      geo: {
        map: 'china',
        aspectScale: 0.75, //长宽比
        zoom: 1.1,
        roam: false,
        itemStyle: {
          normal: {
            // 地图省份的背景颜色
            areaColor: "rgba(20, 41, 87, 0.8)",
            borderColor: "#195BB9",
            borderWidth: 1,
          },
          emphasis: {
            areaColor: "#2B91B7",
          },
        },
        regions: [{
          name: '南海诸岛',
          itemStyle: {
            areaColor: 'rgba(0, 10, 52, 1)',

            borderColor: 'rgba(0, 10, 52, 1)',
            normal: {
              opacity: 0,
              label: {
                show: false,
                color: "#009cc9",
              }
            }
          },


        }],
      },
      series: [{
        type: 'map',
        roam: false,
        label: {
          normal: {
            show: true,
            textStyle: {
              color: '#1DE9B6'
            }
          },
          emphasis: {
            textStyle: {
              color: 'rgb(183,185,14)'
            }
          }
        },

        itemStyle: {
          normal: {
            borderColor: 'rgb(147, 235, 248)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                offset: 0,
                color: '#09132c' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#274d68'  // 100% 处的颜色
              }],
              globalCoord: true // 缺省为 false
            },
          },
          emphasis: {
            areaColor: 'rgb(46,229,206)',
            //    shadowColor: 'rgb(12,25,50)',
            borderWidth: 0.1
          }
        },
        zoom: 1.1,
        //     roam: false,
        map: 'china' //使用
        // data: this.difficultData //热力图数据   不同区域 不同的底色
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        showEffectOn: 'render',
        zlevel: 1,
        rippleEffect: {
          period: 15,
          scale: 4,
          brushType: 'fill'
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: '{b}',
            position: 'right',
            offset: [15, 0],
            color: '#1DE9B6',
            show: true
          },
        },
        itemStyle: {
          normal: {
            color: '#1DE9B6',
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        symbolSize: 12,
        data: points
      }, //地图线的动画效果
      {
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 7, //图标大小
        },
        lineStyle: {
          normal: {
            color: '#1DE9B6',
            width: 1, //线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: [
          { coords: [[118.8062, 31.9208], [117.1582, 36.8701]], lineStyle: { color: '#4ab2e5' } }
          , { coords: [[127.9688, 45.368], [117.1582, 36.8701]], lineStyle: { color: '#4fb6d2' } }
          , { coords: [[110.3467, 41.4899], [117.1582, 36.8701]], lineStyle: { color: '#52b9c7' } }
          , { coords: [[125.8154, 44.2584], [117.1582, 36.8701]], lineStyle: { color: '#5abead' } }
          , { coords: [[116.4551, 40.2539], [117.1582, 36.8701]], lineStyle: { color: '#f34e2b' } }
          , { coords: [[123.1238, 42.1216], [117.1582, 36.8701]], lineStyle: { color: '#f56321' } }
          , { coords: [[114.4995, 38.1006], [117.1582, 36.8701]], lineStyle: { color: '#f56f1c' } }
          , { coords: [[117.4219, 39.4189], [117.1582, 36.8701]], lineStyle: { color: '#f58414' } }
          , { coords: [[112.3352, 37.9413], [117.1582, 36.8701]], lineStyle: { color: '#f58f0e' } }
          , { coords: [[109.1162, 34.2004], [117.1582, 36.8701]], lineStyle: { color: '#f5a305' } }
          , { coords: [[103.5901, 36.3043], [117.1582, 36.8701]], lineStyle: { color: '#e7ab0b' } }
          , { coords: [[106.3586, 38.1775], [117.1582, 36.8701]], lineStyle: { color: '#dfae10' } }
          , { coords: [[101.4038, 36.8207], [117.1582, 36.8701]], lineStyle: { color: '#d5b314' } }
          , { coords: [[103.9526, 30.7617], [117.1582, 36.8701]], lineStyle: { color: '#c1bb1f' } }
          , { coords: [[108.384366, 30.439702], [117.1582, 36.8701]], lineStyle: { color: '#b9be23' } }
          , { coords: [[113.0823, 28.2568], [117.1582, 36.8701]], lineStyle: { color: '#a6c62c' } }
          , { coords: [[102.9199, 25.46639], [117.1582, 36.8701]], lineStyle: { color: '#96cc34' } }
        ]
      }

      ]
    }
    myChart.setOption(option)
  })
})();

// 柱状图2
(function () {
  var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".bar2 .chart"))
  // 2. 指定配置和数据
  var option = {
    grid: {
      top: "10%",
      left: "22%",
      bottom: "10%"
      // containLabel: true
    },
    // 不显示x轴的相关信息
    xAxis: {
      show: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],
        // 不显示y轴的线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
          color: "#fff"
        }
      },
      {
        data: [702, 350, 610, 793, 664],
        inverse: true,
        // 不显示y轴的线
        axisLine: {
          show: false
        },
        // 不显示刻度
        axisTick: {
          show: false
        },
        // 把刻度标签里面的文字颜色设置为白色
        axisLabel: {
          color: "#fff"
        }
      }
    ],
    series: [
      {
        name: "条",
        type: "bar",
        data: [70, 34, 60, 78, 69],
        yAxisIndex: 0,
        // 修改第一组柱子的圆角
        itemStyle: {
          barBorderRadius: 20,
          // 此时的color 可以修改柱子的颜色
          color: function (params) {
            // params 传进来的是柱子对象
            console.log(params)
            // dataIndex 是当前柱子的索引号
            return myColor[params.dataIndex]
          }
        },
        // 柱子之间的距离
        barCategoryGap: 50,
        //柱子的宽度
        barWidth: 10,
        // 显示柱子内的文字
        label: {
          show: true,
          position: "inside",
          // {c} 会自动的解析为 数据  data里面的数据
          formatter: "{c}%"
        }
      },
      {
        name: "框",
        type: "bar",
        barCategoryGap: 50,
        barWidth: 15,
        yAxisIndex: 1,
        data: [100, 100, 100, 100, 100],
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 15
        }
      }
    ]
  }

  // 3. 把配置给实例对象
  myChart.setOption(option)
})();

(function () {

  var chartDom = document.querySelector('.line2 .chart')
  var myChart = echarts.init(chartDom)

  var option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "12"
      }
    },
    grid: {
      left: "10",
      top: "30",
      right: "10",
      bottom: "10",
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"],
        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // x轴线的颜色为   rgba(255,255,255,.2)
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
        // 修改分割线的颜色
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: 'Email',
        type: 'line',
        //第一条 线是圆滑
        smooth: true,
        // 单独修改线的样式
        lineStyle: {
          color: "#0184d5",
          width: 2
        },
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40],
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20],
      },
    ]
  }

  option && myChart.setOption(option)


})()